I layout del sito.

Scelta del layout del sito.

Ricordo che, quando ho cominciato a costruire questo sito, ero abbastanza interessato alle tecniche di impaginazione (layout), e lo sono tuttora.
Di seguito, riporto un riepilogo delle scelte fatte.

Tra i layout a due o a tre colonne, optai per il layout a tre colonne, per poter disporre delle varie opzionalità (news, navigazione supplementare, sondaggi, banner, ecc.) offerte dalla colonna aggiuntiva; tranne che per il modulo "Blocco Note", per il quale la soluzione a due colonne mi è sembrata più adatta per trattare appunti e argomenti tecnici, che generalmente richiedono un maggior spazio in larghezza.

Tra la tecnica del posizionamento assoluto e quella a float, ho preferito quest'ultima.
La tecnica a float non impone nessun vincolo sulla lunghezza relativa delle tre colonne, mentre invece, con la tecnica dei posizionamenti assoluti, se vogliamo un layout con footer, dobbiamo tener presente che la colonna dei contenuti deve essere più lunga delle colonne secondarie.
La separazione delle colonne può essere effettuata o utilizzando i bordi, o il colore, o il background, o ricorrendo ad una combinazione di questi tre effetti; il fatto poi che io abbia usato tutti e tre gli effetti, mi fa pensare a quei cuochi poco bravi che, volendo impressionare a tutti i costi i commensali, preferiscono pasticciare molto in cucina anzichè limitarsi ad un dosaggio semplice e sapiente.
Per contro, siccome i motori di ricerca effettuano il posizionamento del sito, tra l'altro, anche in funzione di ciò che trovano all'inizio del body (specie riguardo ai titoli), e siccome la colonna dei contenuti è l'ultima in ordine del codice html, questo è uno svantaggio della tecnica a float, assieme al fatto che si è obbligati a dimensionare le colonne laterali in pixel. Un altro elemento contro è rappresentato dalla poco accessibilità per gli ipovedenti, che vorrebbero in prima posizione la colonna dei contenuti, e si ritrovano invece, come odioso ostacolo ad essa, a dover trafficare con la colonna di navigazione, purtroppo di nessun aiuto.
In definitiva, considerato che per entrambe le soluzioni ci sono dei pro e dei contro, credo di aver optato per la tecnica a float perchè più facile e flessibile rispetto a quella dei posizionamenti assoluti; e ciò non è poco!

Tra le varianti layout fluido, fisso, o elastico, per la sezione centrale dei contenuti ho scelto il layout fluido , la cui larghezza varia al variare della larghezza della finestra del browser, e quindi è il layout che meglio si adatta alle varie risoluzioni; inoltre, in fase di stampa, una pagina web a layout fluido comporta meno rischi di tagli su una o entrambe le colonne laterali.

Le colonne laterali sono a larghezza fissa (dimensionamento in pixel, e non in percentuale) per avere un miglior controllo della pagina.
Infatti, se le colonne laterali vengono dimensionate in percentuale, si possono avere fastidiosi inconvenienti. Ad esempio, può capitare di avere con alcuni browser uno spiacevole effetto di scrollbar orizzontale della pagina per una interpretazione poco esatta dei valori di percentuale, specie quando un valore 100% è interpretato come "un pò più" del 100% (con conseguente scrollbar!)

Dettagli da non trascurare

Cerchiamo di fissare alcuni dettagli sull'uso dei font, dei margini e dei padding degli elementi di una pagina.
Siccome ho scelto di dimensionare le colonne laterali in pixel (larghezza colonne laterali fissa), conviene esprimere, per avere un sistema di misura coerente ed affidabile, anche i margini e il padding degli elementi delle colonne laterali in pixel (relativamente a certi problemi particolari relativi al padding, conviene ricorrere al box model hack semplificato).

Riporto di seguito un passsaggio tratto integralmente dalla "Guida Layout dei siti con i CSS", ottima pubblicazione di Alessandro Fulciniti:
"È buona norma dare all'utente la possibilità di ridimensionare il testo di una pagina web. Mentre Opera, Mozilla e Safari consentono di personalizzare la dimensione dei caratteri per qualsiasi pagina a prescindere dall'unità di misura scelta per il dimensionamento dei caratteri, Internet Explorer non lo consente per caratteri dimensionati in pixels. Usare quindi una misura relativa è una scelta più attenta verso l'utente. Una scelta che però comporta alcune questioni in fase di progettazione.
Il dimensionamento in em accordato con il dimensionamento relativo dei font consente, come abbiamo visto, un ingrandimento non solo del testo, ma anche della sezione che lo contentiene. Bisogna tener presente in questo caso che un em equivale all'incirca alla larghezza di una lettera con un font non proporzionale (detto comunemente monospaced).
Però, scegliere di dimensionare le colonne in pixel e usare al contempo un carattere dimensionato relativamente, comporta test aggiuntivi, quali ad esempio la visualizzazione della pagina modificando la dimensione del font attraverso le opzioni del browser, per verificare che questa renda comunque bene. "

Ciascuna scelta fatta ha dei pro e dei contro, e mi auguro in futuro di poterne fare delle migliori.

Il div, elemento di contenitore generico.

Nel periodo che facevo queste scelte, ho considerato il tag div prima un oggetto misterioso, poi uno strumento con il quale si può fare tutto, e forse solo ora mi rendo conto di quando e come deve essere usato.

Il tag div ("div" sono le iniziali della parola inglese "division", cioè sezione) è un elemento di contenitore generico, da utilizzare nei casi in cui conviene associare un gruppo di regole CSS a più elementi contenuti in un unico blocco generico .
A ben vedere, i casi pratici di applicazione sono molto pochi. Infatti, se vogliamo rispettare l'aggettivo generico, non dobbiamo usare div quando al suo posto possiamo utilizzare più specificamente un paragrafo, o un titolo, o una tabella, che sono anch'essi elementi block-level, ma autoesplicativi, chiari.
In pratica, il div serve a definire solo le sezioni principali del layout di una pagina web, cioè header, navigazione, sezione destra o sezione extra, sezione dei contenuti e footer, e quindi in definitiva limiteremo il suo utilizzo al solo caso della definizione della struttura della pagina web nella stesura del codice HTML nel corpo della pagina, tra i body di apertura e chiusura (a meno di casi estrosi, di cui spero di poter produrre un esempio appena possibile).
Ne è deprecato l'utilizzo al posto di titoli, paragrafi, tabelle, e quant'altro è definibile direttamente, anche per motivi di maggiore chiarezza: una numerosa sequenza di div generici non favoriscono di certo la leggibilità del codice HTML.

Vale in generale l'assunto fondamentale di tenere ben distinta la struttura di una pagina web dalla sua presentazione.

Per chiarire come può essere usato un div, occorre spiegarne i possibili posizionamenti in base alle regole CSS di presentazione.
Le proprietà che determinano il posizionamento di un div sono: position, float e clear.

Vediamo prima position.
Position può assumere i seguenti valori: static, relative, absolute, fixed.
     static: valore di default; rappresenta la posizione che ciascun div occupa nel flusso normale, e cioè, essendo un elemento blocco come il paragrafo, ad ogni div si va a capo e ad inizio riga.

Di seguito, è possibile osservare i due precedenti div senza margini e senza padding, come se fossero due paragrafi senza interlinea e non formattati.

Concludendo, i div con position: static seguono il normale flusso di una pagina web, che è quello di una sequenza verticale, al pari dei paragrafi di un normale formato A4 di stampa.

Vediamo ora relative.
     relative: la posizione assunta dal div è quella determinata dagli scostamenti dalla posizione che l'elemento avrebbe occupato nel normale flusso del documento; gli scostamenti sono determinati dai valori dichiarati delle coordinate top, right, bottom e left, che rappresentano le distanze tra elementi omologhi (ad esempio, left: 1.8em è la distanza tra il bordo sinistro del box - virtuale o presente - e il bordo sinistro del box in questione).

Appunto, la posizione di box-2_1 è quella scostata di LEFT: 1.8em rispetto alla posizione virtuale che l'elemento avrebbe occupato nel normale flusso del documento, ma che per chiarezza ho rappresentato con box-2.
Il margine sinistro di 5px di entrambi i box è riferito al box contenitore della sezione centrale, per la precisione div id=content; ovviamente, la distanza del bordo sinistro di box-2_1 dal bordo sinistro del div contenitore id=content è 5px+1.8em.

Vediamo che cosa succede se un div relative è annidato in un altro div relative.
Per risparmiare di scrivere codice, prendiamo a prestito i due precedenti box, rinominandoli rispettivamente box-3 e box-3_1.

Il risultato è scontato: box-3_1 ha come box contenitore di riferimento il box-3, e quindi la distanza tra i bordi left dei due box è di 1.8em, e la distanza totale è 1.8em+10px (margine sinistro di box-3_1)

Vediamo ora absolute.

     absolute: il box dell'elemento viene rimosso dal flusso del documento ed è posizionato rispetto al box contenitore in base ai valori delle coordinate top, left, right o bottom.
Il box contenitore di riferimento è, nel nostro contesto, il div della sezione centrale dei contenuti, per la precisione div id=content; il box rappresentato ha il bordo superiore ed il bordo sinistro che distano rispettivamente 154.0em e 250px da quelli del box contenitore.
Se tale elemento di riferimento non esiste (ad esempio, una semplicissima dimostrazione didattica sul div position: absolute in una pagina html in cui questo div fosse il solo div presente), allora il posizionamento avviene in base all'elemento radice HTML, che in condizioni standard coincide con l'area del browser che contiene il documento e che ha inizio dall'angolo superiore sinistro di tale area; in tal caso, ci si riferisce ai bordi dell'area del browser.
Un elemento posizionato in modo assoluto scorre insieme al resto del documento.

Vediamo ora fixed.
     fixed: non supportato da Explorer 6.0 e precedenti su Windows; come per absolute, con due differenze: il contenitore di riferimento è sempre quello dei contenuti, e il div resta fisso quando la pagina scorre.